import classNames from 'classnames'
import React, { FC /*useEffect*/ } from 'react'
import styles from './QuestionCard.module.scss'

type PropsType = {
  id: string
  title: string
  isPublished: boolean
  deleteQuestion?: (id: string) => void
  publishQuestion?: (id: string) => void
}

const QuestionCard: FC<PropsType> = props => {
  const { id, title, isPublished, deleteQuestion, publishQuestion } = props

  function edit(id: string) {
    console.log('edit: ', id)
  }

  function del(id: string) {
    deleteQuestion && deleteQuestion(id)
  }

  function publish(id: string) {
    publishQuestion && publishQuestion(id)
  }

  /*  useEffect(() => {
    console.log('question card mounted')
    return () => {
      console.log('question card unmounted', id)
    }
  }, []) */

  /* const itemClassName = classNames('list-item', {
    published: isPublished,
  }) */

  const itemClassName = classNames({ [styles['list-item']]: true, [styles.published]: isPublished })
  return (
    <div className={itemClassName}>
      <strong>{title}</strong>
      &nbsp;
      {/* 条件判断 */}
      {isPublished ? <span className={styles['publish-span']}>已发布</span> : <span>未发布</span>}
      &nbsp;
      <button onClick={() => edit(id)}>编辑问卷</button>
      &nbsp;
      <button onClick={() => del(id)}>删除问卷</button>
      &nbsp;
      <button onClick={() => publish(id)}>发布问卷</button>
    </div>
  )
}

export default QuestionCard
